<template>
  <!-- 考试类型 -->
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <!-- 导入试卷试题答题情况按钮 -->
        <el-row>
          <!-- <el-button
            type="primary"
            plain
            @click="handleAdd"
            v-hasPermi="['system:examtype:add']"
            >难易度配置</el-button
          > -->
          <el-button
            type="primary"
            @click="handleImport"
            icon="el-icon-upload el-icon--right"
            v-hasPermi="['system:user:import']"
            >导入试卷试题答题情况</el-button
          >
          <!-- <el-button type="warning" icon="el-icon-download"
            >作答数据模板下载</el-button
          > -->
        </el-row>
        <div class="grid-content bg-purple">
          <!-- 左侧数据渲染-->
          <div class="block">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in dataleftList"
                :key="index"
                :type="activity.type"
                color="#0bbd87"
                :timestamp="activity.inputTime"
              >
                {{ activity.inputOperator }}导入作答数据{{
                  activity.recordsNum
                }}条
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <!-- 调整试题难易度&难易度调整详情导出 按钮 -->
        <el-row>
          <el-button type="primary" @click="adjustmentDifficulty"
            >调整试题难易度</el-button
          >
          <el-button
            type="warning"
            @click="handleExport"
            icon="el-icon-download"
            >难易度调整详情导出</el-button
          >
        </el-row>
        <div class="grid-content bg-purple-light">
          <!-- 右侧数据渲染 -->
          <div class="block">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in datarightList"
                :key="index"
                :type="activity.type"
                color="#0bbd87"
                :timestamp="activity.updateTime"
              >
                {{ activity.updateOperator }}调整试题难易度{{
                  activity.updateNum
                }}条
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 难易度配置弹出对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" center>
        <!-- 标头 -->
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="难易度"
              label-width="123px"
              center
              class="difficult"
            >
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="开始错误率（%）"
              label-width="123px"
              center
              class="difficult"
            >
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="截止错误率（%）"
              label-width="123px"
              center
              class="difficult"
            >
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <循环表 -->
        <el-row v-for="(item, index) in percentage" :key="index">
          <el-col :span="8">
            <el-form-item
              :label="item.difficultyName"
              center
              label-width="110px"
            >
            </el-form-item>
          </el-col>
          <!-- 容易开头 -->
          <el-col :span="8">
            <el-form-item label-width="80px" prop="errorRateStart">
              <el-input-number
                :controls="false"
                ref="input1"
                v-model="item.errorRateStart"
                center
                oninput="value=value.replace(/[^\d]/g,'')"
                maxlength="2"
                disabled
                class="input number input1"
              />
              <i style="margin-left: 35px">~</i>
            </el-form-item>
          </el-col>
          <!-- 容易结尾 -->
          <el-col :span="8">
            <el-form-item
              label-width="80px"
              prop="errorRateEnd"
              :rules="rules.startDate"
            >
              <el-input-number
                @input="valueChange"
                @change="change(index, $event)"
                :controls="false"
                :min="item.errorRateStart + 1"
                :max="
                  item.difficultyName == '易'
                    ? 96
                    : item.difficultyName == '较易'
                    ? 97
                    : item.difficultyName == '中'
                    ? 98
                    : item.difficultyName == '较难'
                    ? 99
                    : 100
                "
                v-model="item.errorRateEnd"
                class="input2 number"
                :disabled="item.difficultyName != '难' ? false : true"
              />
              <i style="margin-left: 15px">含</i>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 提示请先输入内容 -->
        <el-row
          style="color: red; float: right; margin-right: 55px"
          v-if="this.complete"
          >请输入正确的内容</el-row
        >
      </el-form>
      <!-- 确定 取消 按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="downloadTemplate"
            >下载模板</el-link
          >
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  difficultyInfo,
  difficultInfo,
  modifyInfo,
  downloadTemplate,
  adjustDifficulty,
  questionsAdjust,
  importTemplate,
  listleftInfo,
  listrightInfo,
  getInfo,
  delInfo,
  addInfo,
  updateInfo,
  exportInfo,
  forbidden,
} from "@/api/system/adjust";
import { getToken } from "@/utils/auth";

export default {
  name: "type",
  data() {
    return {
      complete: false,
      // 接收百分比数据
      percentage: [],
      //左侧和右侧的数据渲染
      dataleftList: [],
      datarightList: [],
      // 菜单表格树数据
      menuList: [],
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 科目信息表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/data/importData",
      },
      // 查询参数
      queryParams: {
        examTypeId: null,
        jobId: null,
        name: null,
        price: null,
        classPeriod: null,
        speaker: null,
        classPeriodConfType: null,
        invoiceName: null,
        classPeriodSign: null,
        order: null,
        examTypeName: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        // errorRateEnd: [{ required: true, message: " ", trigger: "blur" }],
        code: [
          { required: true, message: "考试编码不能为空", trigger: "blur" },
        ],
        name: [
          { required: true, message: "考试名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.dataLeft();
    this.dataRight();
  },
  methods: {
    // 监听输入
    valueChange(e) {
      this.percentage[1].errorRateStart = this.percentage[0].errorRateEnd;
      this.percentage[2].errorRateStart = this.percentage[1].errorRateEnd;
      this.percentage[3].errorRateStart = this.percentage[2].errorRateEnd;
      this.percentage[4].errorRateStart = this.percentage[3].errorRateEnd;
    },
    // 双向绑定数据
    change(i, e) {
      // console.log("索引:", i, "输入得:", e);
      this.percentage[i + 1].errorRateStart = e;
      if (this.percentage[0].errorRateEnd > 96) {
        this.percentage[0].errorRateEnd = 96;
      }
      if (this.percentage[1].errorRateEnd <= this.percentage[0].errorRateEnd) {
        this.percentage[1].errorRateEnd = this.percentage[0].errorRateEnd + 1;
      }
      if (this.percentage[2].errorRateEnd <= this.percentage[1].errorRateEnd) {
        this.percentage[2].errorRateEnd = this.percentage[1].errorRateEnd + 1;
      }
      if (this.percentage[3].errorRateEnd <= this.percentage[2].errorRateEnd) {
        this.percentage[3].errorRateEnd = this.percentage[2].errorRateEnd + 1;
      }
      if (this.percentage[4].errorRateEnd <= this.percentage[3].errorRateEnd) {
        this.percentage[4].errorRateEnd = this.percentage[3].errorRateEnd + 1;
      }
    },
    adjustmentDifficulty() {
      this.$confirm("确定要调整?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(function () {})
        .then(() => {
          adjustDifficulty(this.queryParams).then((response) => {
            this.loading = false;
            this.msgSuccess("调整成功");
            this.dataLeft();
            this.dataRight();
          });
          // console.log("调整成功!");
        })
        .catch(() => {});
    },
    //页面进来左边显示的数据
    dataLeft() {
      this.loading = true;
      listleftInfo(this.queryParams).then((response) => {
        this.dataleftList = response.rows;
        // console.log("页面进来左边的数据", this.dataleftList);
        // this.total = response.total;
        this.loading = false;
      });
    },
    //页面进来右边显示的数据
    dataRight() {
      this.loading = true;
      listrightInfo(this.queryParams).then((response) => {
        this.datarightList = response.rows;
        // console.log("页面进来右边的数据", this.datarightList);
        // this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        examTypeId: null,
        jobId: null,
        name: null,
        price: null,
        classPeriod: null,
        speaker: null,
        classPeriodConfType: null,
        invoiceName: null,
        classPeriodSign: null,
        createBy: null,
        createTime: null,
        order: null,
        status: "0",
        errorRateStart: "0",
        errorRateEnd: "0",
      };
      this.resetForm("form");
    },
    /** 点击难易度配置 */
    handleAdd() {
      this.open = true;
      this.title = "难易度配置";
      difficultyInfo().then((response) => {
        this.percentage = response.rows;
        // console.log("百分比数据", this.percentage);
      });
      // this.$nextTick(() => {
      //   this.$refs.gain.focus();
      // });
      // this.form.status = 1;
    },

    /** 提交按钮 */
    submitForm() {
      var input2 = document.querySelectorAll(".input2");
      // console.log(666, input2[0].firstElementChild.firstElementChild.value);
      if (
        input2[0].firstElementChild.firstElementChild.value == "" ||
        input2[1].firstElementChild.firstElementChild.value == "" ||
        input2[2].firstElementChild.firstElementChild.value == "" ||
        input2[3].firstElementChild.firstElementChild.value == "" ||
        input2[4].firstElementChild.firstElementChild.value == ""
      ) {
        // console.log("没有输入完整");
        this.complete = true;
      } else if (
        Number(input2[0].firstElementChild.firstElementChild.value) <
        Number(input2[1].firstElementChild.firstElementChild.value)
      ) {
        // console.log("全部都输入了");
        this.complete = false;
        modifyInfo(this.percentage).then((response) => {
          // console.log("配置成功!");
          this.loading = false;
          this.open = false;
          this.msgSuccess("配置成功");
          this.dataLeft();
          this.dataRight();
        });
      } else {
        console.log("输入的不对");
        this.complete = true;
      }

      // if (1 == 1) {
      //   modifyInfo(this.percentage).then((response) => {
      //     console.log("配置成功!");
      //     this.loading = false;
      //     this.open = false;
      //     this.msgSuccess("配置成功");
      //     this.dataLeft();
      //     this.dataRight();
      //   });
      // } else {
      //   this.complete = true;
      // }

      // this.$refs["form"].validate((valid) => {
      //   if (valid) {
      //     this.$confirm("是否确认调整难易度配置?", "提示", {
      //       confirmButtonText: "确定",
      //       cancelButtonText: "取消",
      //     })
      //       .then(() => {
      //         console.log(this.percentage, "form");
      //         modifyInfo(this.percentage).then((response) => {
      //           console.log("配置成功!");
      //           this.loading = false;
      //           this.open = false;
      //           this.msgSuccess("配置成功");
      //           this.dataLeft();
      //           this.dataRight();
      //         });
      //       })
      //       .catch(() => {});
      //   } else {
      //     console.log("");
      //   }
      // });
    },

    /** 导出按钮操作 */
    handleExport() {
      // 下载难易度调整文件
      questionsAdjust().then((response) => {
        this.download(response.msg);
      });
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    downloadTemplate() {
      downloadTemplate().then((response) => {
        this.download(response.msg);
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.dataLeft();
      this.dataRight();
    },
    // 提交上传文件
    submitFileForm() {
      // console.log("点击了提交文件");
      this.$refs.upload.submit();
    },
  },
};
</script> 
<style scoped>
.grid-content {
  height: 600px;
  overflow: auto;
  border: 1px solid #d8dce5;
  margin-right: 20px;
  margin-top: 10px;
  padding: 30px;
}
.input {
  margin-left: -70px !important;
  text-align: center !important;
}
.input2 {
  margin-left: -70px !important;
  text-align: center !important;
}
.difficult >>> .el-form-item__label {
  color: rgb(161, 156, 156) !important;
}
i {
  font-style: normal;
}
.number {
  width: 73px !important;
}
</style>
